<template>
    <div class="editorContent">
        <div class="nav">
            <div class="file">
            </div>
            <div>
                <el-button type="text" icon="DeleteFilled" @click="clearEditor">清空</el-button>
                <el-button type="text" icon="View" @click="preview">预览</el-button>
                <el-button type="text" icon="Promotion" @click="createScheme(createSchemeRef)">编辑方案模板</el-button>
            </div>
        </div>
        <div class="editor">
            <Editor ref='editor' />
        </div>
        <Preview ref="previewRef" :html="html" />
        <CreateScheme ref='createSchemeRef' :id="id" title="编辑方案模板" :html="html" />
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import Editor from './components/editor.vue';
import Preview from '@/components/preview/index.vue';
import CreateScheme from './components/createScheme.vue';
import {tplDetail} from './api/req.js';
import {useRoute} from 'vue-router';

const editor = ref(null);
const previewRef = ref(null);
const html = ref('')
const createSchemeRef = ref(null)
const id = ref('')
const route = useRoute()

onMounted(() => {
    id.value = route.query.id
    getDetail()
})

const getDetail = async () => {
    try {
        let res = await tplDetail({
            id: id.value
        })
        if (res.code === 0) {
            editor.value.resetHtml(res.data.doc)
            createSchemeRef.value.setForm(res.data)
        }
    } catch (error) {
        console.log(error)
    }
}


const clearEditor = () => {
    editor.value.resetHtml();
}

const preview = () => {
    html.value = editor.value.valueHtml;
    previewRef.value & previewRef.value.showdialog()
}

const createScheme = (createSchemeRef) => {
    html.value = editor.value.valueHtml;
    createSchemeRef.showdialog()
}


defineOptions({
    name: 'editScheme'
})
</script>

<style lang="scss" scoped>
.editorContent {
    height: 100%;
    display: flex;
    flex-direction: column;

    .nav {
        line-height: 32px;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 20px;
        display: flex;
        background-color: #fff;
        justify-content: space-between;

        .file {
            width: 200px;
            display: flex;

            .fileName {
                margin-right: 10px;
                max-width: 150px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .save {
            img {
                vertical-align: text-top;
            }

            span {
                font-size: 14px;
                margin-left: 3px;
            }
        }
    }

    ::v-deep .el-upload-list {
        display: none;
    }

    .editor {
        flex: 1;
        overflow: hidden;
    }
}
</style>